<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>

<div id="middle">
  <h3>Account Information</h3>

  <table>
    <tr>
      <td>First name:</td>
      <td><input type="text" name="firstName" th:value="${account?.firstName}"/></td>
    </tr>
    <tr>
      <td>Last name:</td>
      <td><input type="text" name="lastName" th:value="${account?.lastName}"/></td>
    </tr>
    <tr>
      <td>Email:</td>
      <td><input type="text" size="40" name="email" th:value="${account?.email}"/></td>
    </tr>
    <tr>
      <td>Phone:</td>
      <td><input type="text" name="phone" th:value="${account?.phone}"/></td>
    </tr>
    <tr>
      <td>Address 1:</td>
      <td><input type="text" size="40" name="address1" th:value="${account?.address1}"/></td>
    </tr>
    <tr>
      <td>Address 2:</td>
      <td><input type="text" size="40" name="address2" th:value="${account?.address2}"/></td>
    </tr>
    <tr>
      <td>City:</td>
      <td><input type="text" name="city" th:value="${account?.city}"/></td>
    </tr>
    <tr>
      <td>State:</td>
      <td><input type="text" size="4" name="state" th:value="${account?.state}"/></td>
    </tr>
    <tr>
      <td>Zip:</td>
      <td><input type="text" size="10" name="zip" th:value="${account?.zip}"/></td>
    </tr>
    <tr>
      <td>Country:</td>
      <td><input type="text" size="15" name="country" th:value="${account?.country}"/></td>
    </tr>
  </table>

  <h3>Profile Information</h3>

  <table>
    <tr>
      <td>Language Preference:</td>
      <td>
        <select name="languagePreference">
          <div th:if="${account != null}">
            <div th:if="${account.languagePreference.equals('chinese')}">
              <option value="chinese" selected>chinese</option>
              <option value="english">english</option>
              <option value="japanese">japanese</option>
            </div>
            <div th:if="${account.languagePreference.equals('english')}">
              <option value="chinese">chinese</option>
              <option value="english" selected>english</option>
              <option value="japanese">japanese</option>
            </div>
            <div th:if="${account.languagePreference.equals('japanese')}">
              <option value="chinese">chinese</option>
              <option value="english">english</option>
              <option value="japanese" selected>japanese</option>
            </div>
          </div>
          <div th:if="${account == null}">
            <option value="chinese" selected>chinese</option>
            <option value="english">english</option>
            <option value="japanese">japanese</option>
          </div>
        </select>
      </td>
    </tr>
    <tr>
      <td>Favourite Category:</td>
      <td>
        <select name="favouriteCategoryId">
          <div th:if="${account != null}">
            <div th:if="${account.favouriteCategoryId.equals('FISH')}">
              <option value="FISH" selected>FISH</option>
              <option value="DOGS">DOGS</option>
              <option value="REPTILES">REPTILES</option>
              <option value="CATS">CATS</option>
              <option value="BIRDS">BIRDS</option>
            </div>
            <div th:if="${account.favouriteCategoryId.equals('DOGS')}">
              <option value="FISH">FISH</option>
              <option value="DOGS" selected>DOGS</option>
              <option value="REPTILES">REPTILES</option>
              <option value="CATS">CATS</option>
              <option value="BIRDS">BIRDS</option>
            </div>
            <div th:if="${account.favouriteCategoryId.equals('REPTILES')}">
              <option value="FISH" >FISH</option>
              <option value="DOGS">DOGS</option>
              <option value="REPTILES" selected>REPTILES</option>
              <option value="CATS">CATS</option>
              <option value="BIRDS">BIRDS</option>
            </div>
            <div th:if="${account.favouriteCategoryId.equals('CATS')}">
              <option value="FISH">FISH</option>
              <option value="DOGS">DOGS</option>
              <option value="REPTILES">REPTILES</option>
              <option value="CATS" selected>CATS</option>
              <option value="BIRDS">BIRDS</option>
            </div>
            <div th:if="${account.favouriteCategoryId.equals('BIRDS')}">
              <option value="FISH">FISH</option>
              <option value="DOGS">DOGS</option>
              <option value="REPTILES">REPTILES</option>
              <option value="CATS">CATS</option>
              <option value="BIRDS" selected>BIRDS</option>
            </div>
          </div>
          <div th:if="${account == null}">
            <option value="FISH" selected>FISH</option>
            <option value="DOGS">DOGS</option>
            <option value="REPTILES">REPTILES</option>
            <option value="CATS">CATS</option>
            <option value="BIRDS">BIRDS</option>
          </div>
        </select>
      </td>
    </tr>
    <tr>
      <td>Enable MyList</td>
      <td>
        <div th:if="${account != null}">
          <div th:if="${account.listOption}">
            <input type="checkbox" name="listOption" value="true" checked/>
          </div>
          <div th:if="${!account.listOption}">
            <input type="checkbox" name="listOption" value="true" />
          </div>
        </div>
        <div th:if="${account == null}">
          <input type="checkbox" name="listOption" value="true" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Enable MyBanner</td>
      <td>
        <div th:if="${account != null}">
          <div th:if="${account.bannerOption}">
            <input type="checkbox" name="bannerOption" value="true" checked/>
          </div>
          <div th:if="${!account.bannerOption}">
            <input type="checkbox" name="bannerOption" value="true"/>
          </div>
        </div>
        <div th:if="${account == null}">
          <input type="checkbox" name="bannerOption" value="true"/>
        </div>
      </td>
    </tr>
  </table>
</div>

</body>
</html>